<template>
	<view>
		<view class="title_box" style="margin-top: 2vw;" >商品共计：<label class="price">¥{{data.pay_fee}}</label></view>
		<block v-if="data.pay_type == 1">
		<view class="code_box" v-if="tickSelected == '3'">
			<view class="title">手机验证码：</view>
			<input class="input" type="text" v-model="yzm" maxlength="6">
			<view class="btn" @tap="sendMsg">{{tip}}</view>
		</view>
<!-- 		<view class="title_box" style="margin-top: 2vw;" v-if="data.pay_type == 2">商品共计：¥{{data.pay_fee}} + {{data.pay_znj}}助农劵</view>
		<view class="title_box" style="margin-top: 2vw;" v-if="data.pay_type == 3">商品共计：积分{{data.pay_znb}}</view> -->
		<view class="title_box">请选择支付方式</view>
		

		<block >
		<!-- 	<view class="recharge_list" @tap="tickColor(5)">
				<view class="icon blance_icon iconfont">&#xe699;</view>
				<view class="name">余额</view>
				<view class="tick iconfont" :class="tickSelected==5 ? 'selected' : '' ">&#xe626;</view>
			</view>
			
          
          <view class="recharge_list" @tap="tickColor(0)">
          	<view class="icon iconfont">&#xe607;</view>
          	<view class="name">微信</view>
          	<view class="tick iconfont" :class="tickSelected==0 ? 'selected' : '' ">&#xe626;</view>
          </view>
        
		  
			<view class="recharge_list" @tap="tickColor(-1)">
				<view class="icon ali_icon iconfont">&#xe68a;</view>
				<view class="name">支付宝</view>
				<view class="tick iconfont" :class="tickSelected==-1 ? 'selected' : '' ">&#xe626;</view>
			</view>
			<view class="recharge_list" @tap="tickColor(3)">
				<view class="icon bank_icon iconfont3">&#xe936;</view>
				<view class="name">银行卡</view>
				<view class="tick iconfont" :class="tickSelected==3 ? 'selected' : '' ">&#xe626;</view>
			</view> -->
			<!-- <view class="recharge_list" @tap="tickColor(1)">
				<view class="icon blance_icon iconfont">&#xe699;</view>
				<view class="name">通兑积分</view>
				<view class="tick iconfont" :class="tickSelected==1 ? 'selected' : '' ">&#xe626;</view>
			</view> -->
			<view class="recharge_list" @tap="tickColor(9)">
				<view class="icon unline_icon iconfont3">&#xe616;</view>
				<view class="name">线下支付</view>
				<view class="tick iconfont" :class="tickSelected==9 ? 'selected' : '' ">&#xe626;</view>
			</view>
		</block>
		</block>
		<block v-if="data.pay_type == 2">
			<view class="recharge_list" @tap="tickColor(5)">
				<view class="icon blance_icon iconfont">&#xe699;</view>
				<view class="name">积分</view>
				<view class="tick iconfont" :class="tickSelected==5 ? 'selected' : '' ">&#xe626;</view>
			</view>
		</block>
		
		<view class="unline_item" v-if="tickSelected == '9'">
<!-- 			<view class="title">线下支付信息</view>
			<view class="u_row">
				<view class="u_r_tit">对公账户名:</view>
				<view class="u_r_msg">{{data.aa}}</view>
			</view>
			<view class="u_row">
				<view class="u_r_tit">账户号码:</view>
				<view class="u_r_msg">{{data.bb}}</view>
			</view>
			<view class="u_row">
				<view class="u_r_tit">开户银行:</view>
				<view class="u_r_msg">{{data.cc}}</view>
			</view>
			<view class="btn" @click="copeUnlineBankCode">复制账户号码</view> -->
			<view class="title">上传支付凭证</view>
			<view class="u_img">
				<image class="img" :src="s1" @tap="openImg"></image>
			</view>
		</view>
		
	<!-- 	<radio-group class="tick_box" >
			<radio style="transform: scale(0.8)" value="1" color="#4d726f" :checked="tick" @tap="radioChange" />
			<view class="text">
				我已经阅读并同意
				<span @tap="gotopage" :data-url="'/pages/notice/noticecontent?id=35'">《购买协议》</span>
			</view>
		</radio-group> -->
		
		<view class="confirm" data-url="/pages/car/success" @click="paymini">确认支付</view>
		
		<view class="mask" v-if="mask">
			<view class="m_box">
				<view class="main">
					<view class="title">提示</view>
					<view class="txt">是否已完成付款操作</view>
					<view class="btn_item">
						<view class="btn" @click="maskChange(false)">关闭窗口</view>
						<view class="btn btn2" @tap="gotopage212">我已付款</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { pathToBase64, base64ToPath } from '../../common/image-tools.js'
import Cfg from '../../common/config.js';
export default {
	data() {
		return {
			data:'',
			pay:'',
			id:'',
			img:'',
			tickSelected: 9,
			x_number:3,
			moredata:3,
			tick: false,
			
			yzm:'',
			tip:'获取验证码',
			sec:0,
			timer:'',
			mask:false,
			
			s1:'../../static/add_img.png',
			s11:'',
			unline_bank_code:'1901103109100138112'
		};
	},
	onLoad(e){
				
				let me = this;	
					me.pay=e.pay;
					me.id=e.id;
		       
				me.Net._get('orderData1',{id:me.id},(res)=>{
					if(res.code ==1){
						me.data=res.data
						// if(me.data.is_tc==3)me.tickSelected=1
						// 	if(me.data.is_tc==2)me.tickSelected=5
					  console.log(me.data)
					}
				});	
			},
	onUnload() {
		clearInterval(this.timer)
	},
	methods: {
		maskChange(_flag){
			this.mask = _flag
		},
		sendMsg(){
			let me = this;
			me.sec = 59;
			me.Net._get('yhcode',{id:me.id},(res)=>{
				if(res.code ==1){
					me.Msg.Success('发送成功')
					me.timer = setInterval(()=>{
						me.sec = me.sec - 1;
						if(me.sec<=1){
							me.tip ="重发验证码"
							clearInterval(me.timer)
						}else{
							me.tip = `${me.sec}秒后重发`
						}
					},1000)	
				}
			});
		},
		radioChange(e) {
			this.tick = !this.tick;			
		},
		
		paymini: function() {
			var that = this;
			// if(!that.tick){
			// 	that.Msg.Fail('请勾选购买协议');
			// 	return
			// }
			if(that.tickSelected==0)
			{
				// #ifdef APP-PLUS
				that.Net._get('wxPay_new',{id:that.id},(res)=>{
					if(res.code ==1){
				let orderData = JSON.parse(res.data);
				//console.log(orderData)
				let pathData = '/pages/payIndex/payIndex?rc_result=' + res.data;
				
				// console.log(orderData.original_id)
				 console.log(pathData)
				
				plus.share.getServices(function(res) {
					var sweixin = null;
					for (var i = 0; i < res.length; i++) {
						var t = res[i];
						if (t.id == 'weixin') {
							sweixin = t;
						}
					}
					if (sweixin) {
						sweixin.launchMiniProgram({
							id: orderData.original_id, //这里写你的小程序原始id（以gh开头）
							type: 0, //这里是不同的环境（默认0）
							path: pathData //这里是指定页的路径，如需传参直接字符串拼接（首页可以省略）
						});
				
					}
				}, function(res) {
					//console.log(JSON.stringify(res));
				});
					}
				});	
	         // #endif
			 // #ifdef H5
			 that.Net._get('wxPay_h5',{id:that.id},(res)=>{
			 	if(res.code ==1){
			 		let resTwo = JSON.parse(res.data)
			 		// uni.navigateTo({
			 			
			 		// 	url: '/pages/personal/url?url=' + resTwo.openlink
			 		// })
			 			
			 	window.location.href = resTwo.openlink;
			 			}
			 		});	
			 // #endif
				that.maskChange(true);
				 // that.Net._get('wxPay',{id:that.id},(res)=>{	
				 // 	// 	// 调起支付
				 // 	var orderInfo = {
				 // 	  "appid": res.data.appid,  // 应用ID（AppID）
				 // 	  "partnerid": res.data.partnerid, // 商户号（PartnerID）
				 // 	  "prepayid": res.data.prepayid,  // 预支付交易会话ID
				 // 	  "package": res.data.package,        // 固定值
				 // 	  "noncestr": res.data.noncestr, // 随机字符串
				 // 	  "timestamp": res.data.timestamp, // 时间戳（单位：秒）
				 // 	  "sign": res.data.sign, // 签名，这里用的 MD5 签名
				 // 	};
				 // 	console.log(orderInfo);
				 // 	uni.requestPayment({
				 // 	    provider: "wxpay",
				 // 	    orderInfo:orderInfo,
				 // 	    success(res) {
				 // 	            that.Msg.Success('付款成功',(res)=>{
				 // 	            uni.switchTab({
				 // 	            	url:'/pages/personal/personal'
				 // 	            })
				 // 	             })
				 // 	    },
				 // 	    fail(err) {
				 // 	            console.log('fail:' + JSON.stringify(err));
				 // 	            console.log("支付失败");   
					// 								 }
				 // 	    });	
				 // });
			
			}
			else if(that.tickSelected==1)
			{
				that.Net._get('pay',{id:that.id,type:1},(res)=>{
					if(res.code ==1){
						that.Msg.Success('付款成功',(res)=>{
						uni.switchTab({
							url:'/pages/personal/personal'
						})
						})
					}
				});
			}	
			else if(that.tickSelected==5)
			{
				that.Net._get('pay',{id:that.id,type:10},(res)=>{
					if(res.code ==1){
						that.Msg.Success('付款成功',(res)=>{
						uni.switchTab({
							url:'/pages/personal/personal'
						})
						})
					}
				});
			}	
			else if(that.tickSelected==9)
			{
				if(!that.s11){
									 that.Msg.Fail('请上传付款截图');
									 return;
				}
				that.Net._get('pay_xx',{id:that.id,img:that.s11},(res)=>{
					if(res.code ==1){
						that.Msg.Success('付款成功，等待审核',(res)=>{
						uni.reLaunch({
							url:'/pages/personal/personal'
						})
						})
					}
				});
			}
			else if(that.tickSelected==3)
			{
				if(!that.yzm){
									 that.Msg.Fail('请输入验证码');
									 return;
				}
				that.Net._get('yhPay',{id:that.id,code:that.yzm},(res)=>{
					if(res.code ==1){
						that.Msg.Success('提交成功',(res)=>{
						uni.switchTab({
							url:'/pages/personal/personal'
						})
						})
					}
				});
			}
			else if(that.tickSelected==-1)
			{
				// #ifdef APP-PLUS
					that.Net._get('aliPay',{id:that.id},(res)=>{
						if(res.code ==1){
							uni.navigateTo({
								url: '/pages/personal/url?url=' + res.data
							})
							that.maskChange(true);
							// uni.requestPayment({
							// 					provider: 'alipay',
							// 					orderInfo:res.data, //微信、支付宝订单数据
							// 					success: function (res) {
							// 					that.Msg.Success('付款成功',(res)=>{
							// 					uni.switchTab({
							// 						url:'/pages/personal/personal'
							// 					})
							// 					 })
							// 						console.log('success:' + JSON.stringify(res));
							// 					},
							// 					fail: function (err) {
							// 						console.log('fail:' + JSON.stringify(err));
							// 					}
							// 				});
						}
					});	
					// #endif
					// #ifdef H5
					that.Net._get('aliPay_h5',{id:that.id},(res)=>{
						if(res.code ==1){
							uni.navigateTo({
								url: '/pages/personal/url?url=' + res.data
							})
						
								}
							});	
					// #endif
			
			}
		               
						},
		tickColor(id) {
			if (this.tickSelected == id) {
				return false
			}else {
				this.tickSelected = id;
			}
		},
		gotopage212(e){
			let url = e.currentTarget.dataset.url;
			uni.switchTab({
				url:'/pages/personal/personal'
			})
		},
		go(){ 
			let me = this;	
			me.Net._get('aliPay',{id:me.id},(res)=>{
				if(res.code ==1){
					uni.requestPayment({
										provider: 'alipay',
										orderInfo:res.data, //微信、支付宝订单数据
										success: function (res) {
										uni.navigateTo({
											url:'/pages/car/success'
										})
											console.log('success:' + JSON.stringify(res));
										},
										fail: function (err) {
											console.log('fail:' + JSON.stringify(err));
										}
									});
				}
			});	
		},
		gotopage(e){
			let url = e.currentTarget.dataset.url;
			uni.navigateTo({
				url:url
			})
		},
		onBackPress(e){
		  console.log("监听返回按钮事件",e);
	uni.navigateTo({
		url:'/pages/mylist/mylist'
	})
		  // 此处一定姚要return为true，否则页面不会返回到指定路径
		  return true;
		},
		setMoreData(){
			console.log(123);
			this.x_number = 99;
			this.moredata = 100;
		},
		copeUnlineBankCode(){
			uni.setClipboardData({
				data: this.data.bb,
				success: function () {
					console.log('success');
				}
			});
		},
		openImg() {
			let me = this;
			//console.log('用户点击确定');
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], //从相册选择
				success: function(chooseImageRes) {
					const tempFilePaths = chooseImageRes.tempFilePaths
					pathToBase64(tempFilePaths[0]).then(base64 => {
						me.Net._post('upAvatara1',{avatar:base64,t:1},(res)=>{
							if(res.code ==1){
							me.s1=Cfg.Setting.img+res.data
							me.s11=res.data	
							}
						});
					})
					.catch(error => {
					});			
				}
			});
			
		
		},
	}
};
</script>
<style>
	page{
		padding-bottom: 5vw;
	}
</style>
<style lang="scss">

.title_box{
	width: 100%;
	height: 50px;
	font-size: 14px;
	color: #333;
	text-indent: 10px;
	line-height: 50px;
	background-color: #fff;
	display: inline-block;
	.price{
		font-size: 5vw;
		font-weight: bold;
		color: #ff1111;
		padding-left: 10rpx;
	}
}

.money_box{
	width: 100%;
	height: 100px;
	background-color: #fff;
	display: flex;
	border-bottom: 1px solid #f5f5f5;
}

.money_box .icon{
	width: 50px;
	height: 100%;
	text-align: right;
	font-size: 30px;
	color: #333;
	margin-top: 50px;
}

.money_box .money{
	width: calc(100% - 30px);
	height: 100%;	
	font-size: 40px;
	color: #FF4447;
	margin-top: 15px;
	text-indent: 10px;
	border-bottom: 1px solid #f5f5f5;
}

.recharge_list {
		width: 100%;
		height: 50px;
		background-color: #fff;
		margin-bottom: 1px;
		position: relative;
		display: flex;
	}

	.recharge_list .text {
		font-size: 14px;
		color: #333;
		height: 50px;
		line-height: 50px;
		margin-left: 16px;
	}

	.recharge_list input {
		font-size: 14px;
		color: #36C1BA;
		height: 50px;
		line-height: 50px;
		margin-left: 16px;
		outline: none;
	}

	.recharge_list .icon {
		font-size: 28px;
		color: #00cd0c;
		height: 50px;
		line-height: 50px;
		position: absolute;
		left: 15px;
	}
	
	.recharge_list .ali_icon {
		color: #09b7ec;
	}
	.recharge_list .gwb_icon{
		color: #ec4715;
	}
	.recharge_list .blance_icon{
		color: #FEBD21;
	}
	.recharge_list .coupon_icon{
		color: #4d726f;
	}
	.recharge_list .bank_icon{
		color: #0062ff;
	}
	.recharge_list .unline_icon{
		color: #ffae50;
	}
	
	.recharge_list .icon image{
		width: 6vw;
	}

	.recharge_list .name {
		font-size: 14px;
		color: #333;
		height: 50px;
		line-height: 50px;
		position: absolute;
		left: 60px;
	}

	.recharge_list .tick {
		font-size: 26px;
		color: #999999;
		height: 50px;
		line-height: 50px;
		position: absolute;
		right: 15px;
	}
	
	.selected {
		color: #4d726f !important;
	}
	
	.confirm{
		margin-top: 1vw;
	}


	.tick_box {
		width: 90%;
		margin: 4vw auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.tick_box .text {
		font-size: 3.5vw;
		color: #999;
	}


.code_box{
	width: 100%;
	background: #ffffff;
	margin: 2vw 0;
	padding: 3vw 10px;
	display: flex;
	align-items: center;
	.title{
		width: 30%;
		font-size: 14px;
		color: #333;
	}
	.input{
		flex: 1;
		background: #f5f5f5;
		border-radius: 10rpx;
		margin: 0 40rpx;
		height: 8vw;
		line-height: 8vw;
	}
	.btn{
		padding: 8rpx 20rpx;
		font-size: 26rpx;
		color: #ffffff;
		border-radius: 10rpx;
		background: #4d726f;
	}
}
.unline_item{
	width: 100%;
	margin-top: 20rpx;
	background: #ffffff;
	padding: 2vw 15px;
	.title{
		width: 100%;
		font-size: 3.5vw;
		color: #333333;
		padding-top: 3vw;
		padding-bottom: 3vw;
	}
	.u_row{
		width: 100%;
		display: flex;
		align-items: flex-start;
		.u_r_tit{
			width: 200rpx;
			font-size: 3.5vw;
			font-weight: bold;
			color: #333333;
		}
		.u_r_msg{
			flex: 1;
			color: #333;
			font-size: 3.5vw;
			text-align: right;
			padding-bottom: 2vw;
		}
	}
	.btn{
		width: 40%;
		margin-left: 30%;
		padding: 2vw 0;
		text-align: center;
		font-size: 3vw;
		color: #4d726f;
		border-radius: 10rpx;
		background: #ffedee;
		border: 1rpx solid #4d726f;
	}
	.u_img{
		width: 100%;
		.img{
			width: 20vw;
			height: 20vw;
			border-radius: 15rpx;
		}
	}
}
.mask{
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.7);
	.m_box{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		.main{
			width: 70%;
			padding: 5vw;
			background: #ffffff;
			border-radius: 20rpx;
			.title{
				width: 100%;
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
				text-align: center;
			}
			.txt{
				width: 100%;
				text-align: center;
				padding-top: 3vw;
				font-size: 30rpx;
				color: #7f7f7f;
			}
			.btn_item{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-around;
				padding-top: 5vw;
				.btn{
					background: #b1b1b1;
					color: #ffffff;
					text-align: center;
					padding: 15rpx 20rpx;
					border-radius: 20rpx;
				}
				.btn2{
					background: #4d726f;
				}
			}
		}
	}
}
</style>
